<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ex" uri="/WEB-INF/tld/showInformation.tld"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="UTF-8">
  <title>薪酬管理系统--管理员</title>
  <link rel="stylesheet" type="text/css"
        href="/resources/css/styleSheet.css">
  <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
        crossorigin="anonymous">
  <link
          href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
          rel="stylesheet">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script
          src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="padding-top: 10%;background-size: cover;">
<ex:Banner/>
<!-- 这里之后改一下 -->
<c:if test="${not empty admin}">


  <!--页面中心内容-->
  <div class="row">
    <div class="col-sm-2">
      <!--菜单组件：手风琴 panel-group容器-->
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <!--面板-->
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                员工管理
              </a>
            </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              <!--嵌套列表组-->
              <ul class="list-group">
                  <a href="http://localhost:8080/admin/checkAllEmployees" class="list-group-item list-group-item-action">员工信息</a>
                  <li class="list-group-item"><a href="${pageContext.request.contextPath}/admin/payForEmployees">薪资发放</a></li>
                  <li class="list-group-item"><a href="${pageContext.request.contextPath}/admin/checkAllSalary">薪资列表</a></li>
              </ul>
            </div>
          </div>
        </div>

        <!--面板-->
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="empTitle">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#empContent" aria-expanded="true" aria-controls="collapseOne">
                部门管理
              </a>
            </h4>
          </div>
          <div id="empContent" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              <!--嵌套列表组-->
              <ul class="list-group">
                  <a href="${pageContext.request.contextPath}/admin/checkAllDepart" class="list-group-item list-group-item-action">部门信息</a>
                  <a href="${pageContext.request.contextPath}/admin/getOneInfo" class="list-group-item list-group-item-action">部门结构</a>

              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="col-sm-10">

        <div class="row">
            <div class="col-9">
                <form class="row" action="http://localhost:8080/admin/findEmployeeByKeysForSalary" method="GET">
                    <div class="col-auto">

                        <input type="text" class="form-control" id="keys" name="keys" placeholder="支持用户名，全名搜索">
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary mb-3">查询</button>
                    </div>
                </form>
            </div>
        </div>


        <div class="row">
            <div class="col-8">
                <div class="alert" id="messageAlert" role="alert">
                        ${message.message}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
            </div>
        </div>


        <div class="row" style="margin-top: 30px">
            <div class="col-sm-11">
                <table class="table table-bordered table-hover table-striped">
                    <tr>
                        <th style="text-align: center; white-space: nowrap;">用户名</th>
                        <th style="text-align: center; white-space: nowrap;">全名</th>
                        <th style="text-align: center; white-space: nowrap;">入职时间</th>
                        <th style="text-align: center; white-space: nowrap;">部门</th>
                        <th style="text-align: center; white-space: nowrap;">职级</th>
                        <th style="text-align: center; white-space: nowrap;">工资卡号</th>
                        <th style="text-align: center; white-space: nowrap;">在职状态</th>
                        <th style="text-align: center; white-space: nowrap;">操作</th>
                    </tr>
                    <c:forEach items="${employeeList.items}" var="employee">
                        <tr>
                            <td style="text-align: center; white-space: nowrap;"><c:out value="${employee.username}"/></td>
                            <td style="text-align: center; white-space: nowrap;"><c:out value="${employee.fullname}"/></td>
                            <td style="text-align: center; white-space: nowrap;"><c:out value="${employee.employTime}"/></td>
                            <td style="text-align: center; white-space: nowrap;"><c:out value="${employee.departmentName}"/></td>
                            <td style="text-align: center; white-space: nowrap;"><c:out value="${employee.levelName}"/></td>
                            <td style="text-align: center; white-space: nowrap;"><c:out value="${employee.bankAccount}"/></td>
                            <c:if test="${employee.isExpire == 1}"><td style="text-align: center; white-space: nowrap;">已离职</td></c:if>
                            <c:if test="${employee.isExpire != 1}"><td style="text-align: center; white-space: nowrap;">在职</td></c:if>
                            <td style="text-align: center; white-space: nowrap;">
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#updateModal${employee.username}">发放工资</button>

                                <div class="modal fade" id="updateModal${employee.username}" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title">发放员工工资</h4>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            </div>
                                            <div class="modal-body">
                                                <!--模态框内容加表单-->
                                                <form action="/admin/paySalary" method="POST">
                                                    <input type="hidden" name="username" value="${employee.username}" />
                                                    <div class="form-group">
                                                        <label for="username1">用户名</label>
                                                        <input type="text" class="form-control" id="username1" value="${employee.username}" readonly>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="performance2">绩效</label>
                                                        <select class="form-control" id="performance2" name="performance">
                                                            <option value="A">A</option>
                                                            <option value="B">B</option>
                                                            <option value="C">C</option>
                                                            <!-- 添加更多绩效等级选项 -->
                                                        </select>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                                        <input type="submit" class="btn btn-primary" value="发放" />
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </div>



        <ul class="col-md-12">
            <div class="col-md-offset-3 col-md-2">
                <c:if test="${employeeList.previousPage}">
                    <ul class="pager">
                        <li><a href="http://localhost:8080/admin/payForEmployees?pageNo=${employeeList.currentPageNo-1}">上一页</a></li>
                    </ul>
                </c:if>
                <c:if test="${!employeeList.previousPage}">
                    <ul class="pager">
                        <li class="disabled">上一页</li>
                    </ul>
                </c:if>
            </div>

            <div class="col-md-4">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <c:forEach begin="1" end="${employeeList.totalPageCount}" var="i">
                            <c:if test="${employeeList.currentPageNo == i}">
                                <li class="disabled">
                                    <a href="http://localhost:8080/admin/payForEmployees?pageNo=${i}">${i}</a>
                                </li>
                            </c:if>
                            <c:if test="${employeeList.currentPageNo != i}">
                                <li>
                                    <a href="http://localhost:8080/admin/payForEmployees?pageNo=${i}">${i}</a>
                                </li>
                            </c:if>
                        </c:forEach>
                    </ul>
                </nav>
            </div>

            <div class="col-md-2">
                <c:if test="${employeeList.nextPage}">
                    <ul class="pager">
                        <li><a href="http://localhost:8080/admin/payForEmployees?pageNo=${employeeList.currentPageNo+1}">下一页</a></li>
                    </ul>
                </c:if>
                <c:if test="${!employeeList.nextPage}">
                    <ul class="pager">
                        <li class="disabled">下一页</li>
                    </ul>
                </c:if>
            </div>
        </ul>



    </div>
  </div>
</c:if>

<div style="height: 300px">

</div>

<!--统一的尾部：版权信息-->
<ex:Footer/>

<!-- jQuery and JavaScript Bundle with Popper -->
<script
        src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        crossorigin="anonymous"></script>
<script
        src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        crossorigin="anonymous"></script>
<script
        src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
        crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>

<script>
  $(document).ready(function() {
    if ('${message.message}') {
      if ('${message.status}' == 0) {
        $('#messageAlert').addClass('alert-danger');
      } else if ('${message.status}' == 1) {
        $('#messageAlert').addClass('alert-success');
      }
      $('#messageAlert').show();
    } else {
      $('#messageAlert').hide();
    }
  });
</script>


</body>
</html>
